<template>
	<view class="indexContainer">
		<!-- 头部搜索区域 -->
		<view class="header">
			<view class="headerMain">
				<image class="leftImg" src="../../static/images/ss.png" ></image>
				<input class='middle' type="text" placeholder="狗狗美食">
				<image class="rightImg" src="../../static/images/right.png"></image>
			</view>
		</view>
		<!-- scroll-view -->
		<scroll-view class="scrollView" scroll-y="true" >
			<!-- 轮播图-->
			<view class="Swiper">
				<swiper class="SwiperMain" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiperItem" v-for="banner in bannerList" :key="banner.index">
						<image class="swiperImg" :src="banner.img_url"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- E宠年货节 -->
			<view class="Echong">
				<image class="eImg" :src="EchongImg.img_url"></image>
			</view>
			<!-- 年货大集 -->
			<view class="Goodthing'">
				<image class="topImg" :src="GoodThingImg.img_url"></image>
			</view>
			<!-- 养宠风尚 拒绝平庸-->
			<view class="Ychong">
				<text class="Ytitle">{{indexList[3].title}}</text>
				<view class="YMain" v-for="goodsList in GoodsList" :key="goodsList.gid">
					<image class="YleftImg" :src="goodsList.img_src"></image>
					<view class="YMainRight">
						<text class="Ytext">{{goodsList.title}}</text>
						<view class="YrightBottom">
							<image class="YrightImg" :src="goodsList.goods_img"></image>
							<view class="Right">
								<text class="RightToptext">￥{{goodsList.sale_price}}</text>
								<text class="RightBottomtext">{{goodsList.be_interested}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 心选特惠 -->
			<view class="heartChoose">
			<view class="heartTitle">
				<text class="hleftText">{{indexList[4].title}}</text>
				<text class="hrightText">严选好物降价啦！</text>
			</view>
			<view class="mainBox" >
				<view class="heartMain" v-for="heartgoods in heartList" :key="heartgoods.gid">
					<view class="heartMainItem">
						<image class="heartImg" :src="heartgoods.goods_img"></image>
						<view class="heartText">
							<text class="textHeader">{{heartgoods.title}}</text>
							<view class="textBottom">	
								<text class="bottomBig">￥{{heartgoods.sale_price}}</text>
								<text class="bottomSmall">￥{{heartgoods.market_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
			}
		},
		mounted() {
			this.getHomeData()
			// setTimeout(()=>
			// console.log(this.GoodThingImg)
			// ,2000)
		},
		methods: {
			getHomeData(){
				this.$store.dispatch('getIndexData')
			}
		},
		computed:{
			...mapGetters(['indexList']),
			bannerList(){
				return (this.indexList[0] || {}).images || []
			},
			EchongImg(){
				return (this.indexList[1] || {}).images || {}
			},
			GoodThingImg(){
				return (this.indexList[2] || {}).images || {}
			},
			GoodsList(){
				return (this.indexList[3] || {}).goodsList || []
			},
			heartList(){
				return (this.indexList[4] || {}).goodsList || []
			}
		}
	}
</script>

<style lang="stylus">
.indexContainer
	height 100%
	background-color #dadada
	.header
		width 100%
		height 120rpx
		display flex
		align-items center
		justify-content center
		.headerMain
			width 750rpx
			height 60rpx
			display flex
			justify-content space-around
			.middle
				width 680rpx
				height 50rpx
				margin-left 20rpx
				border 1rpx solid #efefb3
			.leftImg
					width 20rpx
					height 20rpx
					margin-top 18rpx
					margin-left 20rpx
			.rightImg
				width 50rpx
				height 50rpx
	.scrollView
		height calc(100vh - 120rpx)
		.Swiper
			width 710rpx
			height 300rpx
			margin 0 auto
			.SwiperMain
				.swiperItem
					.swiperImg
						width 710rpx
						height 300rpx
		.Echong
			text-align center
			.eImg
				width 710rpx
				height 194rpx
				margin-top 10rpx
		.Goodthing
			text-align center
			.topImg
				width 710rpx
				height 194rpx
		.Ychong
			width 710rpx
			height 600rpx
			.Ytitle
				width 690rpx
				height 58rpx
				font-size 39rpx
				margin-left 20rpx
				font-weight 600
			.YMain
				display flex
				margin 20rpx 10rpx
				.YleftImg
					width 380rpx
					height 230rpx
					border-radius 30rpx
					margin-right 20rpx
				.YMainRight
					width 310rpx
					height 230rpx
					.Ytext
						font-size 36rpx
					.YrightBottom
						display flex
						margin-top 20rpx
						.YrightImg
							width 100rpx
							height 100rpx
						.Right
							display flex
							flex-direction column
							margin-left 20rpx
							align-items center
							.RightToptext
								font-weight 600
								margin-top 10rpx
							.RightBottomtext
								margin-top 10rpx 
								font-size 26rpx
		.heartChoose
			width 710rpx
			height 510rpx
			.heartTitle
				width 690rpx
				height 60rpx
				.hleftText
					font-size 40rpx
					font-weight 600
					margin-left 20rpx
				.hrightText
					margin-left 40rpx
					font-size 28rpx
					color #CCCCCC
			.mainBox
				width 690rpx
				height 302rpx
				display flex
				align-items center
				flex-wrap wrap
				.heartMain
					width 33.333333%
					height 302rpx
					.heartMainItem
						width 230rpx
						height 302rpx
						display flex
						flex-direction column
						justify-content center
						.heartImg
							width 186rpx
							height 186rpx
							margin-left 20rpx
						.heartText
							.textHeader
								width 210rpx
								font-size 30rpx
								margin-left 10rpx
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							.textBottom
								width 210rpx
								height 44rpx
								display flex
								.bottomBig
									font-size 38rpx
									font-weight 600
								.bottomSmall
									font-size 20rpx
									margin-top 20rpx
									text-decoration:line-through
</style>	
